<template>
  <el-form :inline="true">
    <div class="search-container">
      <el-form-item
        v-for="(item, index) in searchFields.filter((val) => {
          return !val.advanced
        })"
        :key="index"
        class="pr12"
      >
        <el-input
          v-if="item.component === 'input'"
          v-model.trim="queryForm[item.name]"
          :class="item.className || ''"
          clearable
          :placeholder="item.placeholder"
        />
        <el-date-picker
          v-if="item.component === 'datetimepicker'"
          v-model="queryForm[item.name]"
          :class="item.className || ''"
          :end-placeholder="item.placeholder[1] || '结束时间'"
          range-separator="~"
          :start-placeholder="item.placeholder[0] || '开始时间'"
          type="datetimerange"
          value-format="yyyy-MM-dd HH:mm:ss"
        />
        <el-cascader
          v-if="item.component === 'cascader'"
          v-model="queryForm[item.name]"
          :class="item.className || ''"
          clearable
          filterable
          :options="item.options"
          :placeholder="item.placeholder"
          :props="item.props"
        />
        <el-select
          v-if="item.component === 'select'"
          v-model="queryForm[item.name]"
          :class="item.className || ''"
          clearable
          filterable
          :placeholder="item.placeholder"
        >
          <el-option
            v-for="(citem, cindex) in item.options"
            :key="cindex"
            :label="citem[item.props.label]"
            :value="citem[item.props.value]"
          />
        </el-select>
        <el-checkbox
          v-if="item.component === 'checkbox'"
          v-model="queryForm[item.name]"
          border
          :false-label="item.falseLabel"
          :true-label="item.trueLable"
        >
          {{ item.placeholder }}
        </el-checkbox>
      </el-form-item>
      <el-form-item v-if="advancedButtonShow" style="float: right">
        <el-button :icon="advancedIcon" plain @click="advanced = !advanced">
          更多搜索
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button
          icon="el-icon-search"
          style="margin-left: 0 !important"
          type="primary"
          @click="queryData"
        >
          查询
        </el-button>
        <el-button icon="el-icon-document" plain @click="reset">重置</el-button>
      </el-form-item>
      <el-row v-if="advanced">
        <el-form-item
          v-for="(item, index) in searchFields.filter((val) => {
            return val.advanced
          })"
          :key="index"
          class="pr12"
        >
          <el-input
            v-if="item.component === 'input'"
            v-model.trim="queryForm[item.name]"
            :class="item.className || ''"
            clearable
            :placeholder="item.placeholder"
          />
          <el-date-picker
            v-if="item.component === 'datetimepicker'"
            v-model="queryForm[item.name]"
            :class="item.className || ''"
            :end-placeholder="item.placeholder[1] || '结束时间'"
            range-separator="~"
            :start-placeholder="item.placeholder[0] || '开始时间'"
            type="datetimerange"
            value-format="yyyy-MM-dd HH:mm:ss"
          />
          <el-cascader
            v-if="item.component === 'cascader'"
            v-model="queryForm[item.name]"
            :class="item.className || ''"
            clearable
            filterable
            :options="item.options"
            :placeholder="item.placeholder"
            :props="item.props"
          />
          <el-select
            v-if="item.component === 'select'"
            v-model="queryForm[item.name]"
            :class="item.className || ''"
            clearable
            filterable
            :placeholder="item.placeholder"
          >
            <el-option
              v-for="(citem, cindex) in item.options"
              :key="cindex"
              :label="citem[item.props.label]"
              :value="citem[item.props.value]"
            />
          </el-select>
          <el-checkbox
            v-if="item.component === 'checkbox'"
            v-model="queryForm[item.name]"
            border
            :false-label="item.falseLabel"
            :true-label="item.trueLable"
          >
            {{ item.placeholder }}
          </el-checkbox>
        </el-form-item>
      </el-row>
    </div>
  </el-form>
</template>

<script>
  export default {
    props: {
      searchFields: {
        type: Array,
        default() {
          return []
        },
      },
    },
    data() {
      return {
        queryForm: {},
        advanced: 0,
      }
    },
    computed: {
      advancedIcon() {
        return this.advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
      },
      advancedButtonShow() {
        return (
          this.searchFields.filter((val) => {
            return val.advanced
          }).length > 0
        )
      },
    },
    methods: {
      queryData() {
        this.$emit('queryData', this.queryForm)
      },
      reset() {
        this.queryForm = {}
        this.queryData()
      },
    },
  }
</script>

<style lang="scss" scoped>
  .search-container {
    width: 100%;
    height: auto;
    padding: 12px 12px 2px 12px;
    margin-bottom: 12px;
    background: #f2f5fc;
  }
</style>
